@mixin m($num:0){
    margin: $num;
}
@mixin p($num:0){
    padding: $num;
}
@mixin min-body-width{
    min-width: 1080px;
}
@mixin min-content-width{
    width: 1080px;
}
@mixin width($num:0px){
    width: $num;
}
@mixin height($num:0px){
    height: $num;
}
@mixin backface-visibility($tyle:hidden){
    backface-visibility:$tyle;
    -webkit-backface-visibility:$tyle;
    -moz-backface-visibility:$tyle;
    -ms-backface-visibility:$tyle;
}
@mixin transition($num:.5s){
    transition: $num;
    -webkit-transition:$num;
    -moz-transition:$num;
    -o-transition:$num;
}
@mixin transition-delay($num:.5s){
    transition-delay: $num;
    -webkit-transition-delay:$num;
    -moz-transition-delay:$num;
    -o-transition-delay:$num;
}
@mixin transition-duration($num:.5s){
    transition-duration: $num;
    -webkit-transition-duration:$num;
    -moz-transition-duration:$num;
    -o-transition-duration:$num;
}
@mixin transition-fn($num){
    transition: $num;
    -webkit-transition:$num;
    -moz-transition:$num;
    -o-transition:$num;
}
@mixin transform($num){
    transform: $num;
    -webkit-transform:$num;
    -moz-transform:$num;
    -o-transform:$num;
}
@mixin transform-origin($num){
    transform-origin: $num;
    -webkit-transform-origin:$num;
    -moz-transform-origin:$num;
    -o-transform-origin:$num;
}
// 模糊
@mixin filter($num){
    //blur(5px)
    -webkit-filter: $num;
    -moz-filter: $num;
    -o-filter: $num;
    -ms-filter: $num;
    filter: $num;
}
// 居中
@mixin content{
    @include min-body-width;
    @include min-content-width;
    @include m(0 auto);
}
// 去除浮动
@mixin clearfix{
    clear: both;
    &:after,
    &:before{
        content: '';
        display: table;
    }
}
@mixin clearfix-row{
    @include clearfix();
    display: inline-block;
    vertical-align: top;
    width: 100%;
}

@mixin btn{
    line-height: 30px;
    padding: 0 10px;
    border-radius: 3px;
    display: inline-block;
    cursor: pointer;
    color: #666;
    font-size: 12px;
}
// 按钮hover下滑线效果
@mixin btn-hover-line($time:.3s,$color:#333){
    &:after{
        @include transition($time);
        content: '';
        position: absolute;
        bottom: -5px;
        left:50%;
        width:0;
        border-bottom:1px solid $color;
    }
    &:hover{
        &:after{
            width: 100%;
            left:0;
        }
    }
}
@mixin box-shadow5{
    -moz-box-shadow: 0 0 5px rgba(0,0,0,0.14);
    -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.14);
    box-shadow: 0 0 5px rgba(0,0,0,0.14);
}
@mixin box-shadow($num){
    -moz-box-shadow: $num;
    -webkit-box-shadow: $num;
    box-shadow: $num;
}

@mixin animation($name:'',$time:0s,$delay:0,$count:1,$function:linear){
    //infinite
    animation-name: $name;
    animation-duration: $time;
    animation-timing-function: $function;
    animation-iteration-count: $count;
    //animation-direction: alternate;
    animation-fill-mode : forwards;
    animation-delay:$delay;

    -webkit-animation-name: $name;
    -webkit-animation-duration: $time;
    -webkit-animation-timing-function: $function;
    -webkit-animation-iteration-count: $count;
    //-webkit-animation-direction: alternate;
    -webkit-animation-fill-mode : forwards;
    -webkit-animation-delay:$delay;

    -moz-animation-name: $name;
    -moz-animation-duration: $time;
    -moz-animation-timing-function: $function;
    -moz-animation-iteration-count: $count;
    //-moz-animation-direction: alternate;
    -moz-animation-fill-mode : forwards;
    -moz-animation-delay:$delay;

    -o-animation-name: $name;
    -o-animation-duration: $time;
    -o-animation-timing-function: $function;
    -o-animation-iteration-count: $count;
    //-o-animation-direction: alternate;
    -o-animation-fill-mode : forwards;
    -o-animation-delay:$delay;
}
@mixin radius($unit:0){
    -o-border-radius: $unit;
    -moz-border-radius: $unit;
    -webkit-border-radius: $unit;
    border-radius: $unit;
}
//@-webkit-keyframes
//@-o-keyframes
//@-moz-keyframes

@mixin scrolling-touch(){
    -webkit-overflow-scrolling: touch;
    -webkit-backface-visibility: hidden;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    -webkit-text-size-adjust: none;
}
.scrolling-touch {
    @include scrolling-touch();
}

@keyframes error-icon{
    0%{
        @include transform(translateX(0px));
    }
    33%{
        @include transform(translateX(-5px));
    }
    66%{
        @include transform(translateX(5px));
    }
    100%{
        @include transform(translateY(0px));
    }
}
@-webkit-keyframes error-icon{
    0%{
        @include transform(translateX(0px));
    }
    33%{
        @include transform(translateX(-5px));
    }
    66%{
        @include transform(translateX(5px));
    }
    100%{
        @include transform(translateY(0px));
    }
}
@-moz-keyframes error-icon{
    0%{
        @include transform(translateX(0px));
    }
    33%{
        @include transform(translateX(-5px));
    }
    66%{
        @include transform(translateX(5px));
    }
    100%{
        @include transform(translateY(0px));
    }
}
